<template>
  <div>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="dataTable"
      :options="options"
      @row-click="rowClick"
      selection-row
      @selection-change="selectChange"
      :pagination="pagination"
      @pagination-current-change="pageChange"
    >
      <div class="title" slot="header">
        <span class="text">文书列表</span>
        <list-search :cols="columns" @search="searchParamChange" />
        <head-btns :add="add" :mod="mod" :del="del" />
      </div>
    </d2-crud>
  </div>
</template>
<script>
import utils from "@/assets/utils/zhzf-util";
import docApi from "@/api/system/doc";
import { mapState, mapMutations } from "vuex";
import HeadBtns from "@/views/comps/zhzf/head-btns";
import { frameInRoutes } from "@/router/routes";
import layoutHeaderAside from "@/views/layout/header-aside";
import ListSearch from "../../comps/zhzf/list-search";

import tabPageMinxin from "@/assets/minxin/tag-page";
import tabPage from "@/views/system/doc/detail-info";
export default {
  name: "docPage",
  mixins: [tabPageMinxin],
  components: { ListSearch, HeadBtns },
  data() {
    return {
      columns: [
        {
          title: "序号",
          key: "no",
          minWidth: 40,
          formatter: (row, col, val, index) => {
            let flag =
              (this.pagination.currentPage - 1) * this.pagination.pageSize;
            return flag + index + 1;
          }
        },
        { title: "名称", key: "name", width: "180" },
        {
          title: "序号",
          key: "sort",
          width: "180"
        },
        { title: "类别", key: "status" },
        { title: "状态", key: "status" }
      ],
      dataTable: [],
      options: {
        stripe: true,
        highlightCurrentRow: true
      },
      pagination: {
        currentPage: 1,
        pageSize: utils.getPageSize(),
        total: 0
      },
      selected: null,
      query: {}
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    ...mapMutations({
      pageInit: "d2admin/page/init",
      headerSet: "d2admin/menu/headerSet"
    }),
    async searchParamChange(query) {
      this.query = query;
      await this._fetchListData();
    },
    initPage() {
      this._fetchListData();
    },
    async _fetchListData() {
      let res = await docApi.pageList({ ...this.query, ...this.pagination });
      this.dataTable = res.data.rows;
      this.pagination.total = res.data.total;
    },
    pageChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this._fetchListData();
    },
    rowClick(row) {
      this.$refs.d2Crud.$children[1].toggleRowSelection(row);
    },
    selectChange(selection) {
      this.selected = selection;
    },
    showDetail(row) {
      let pageTitle = "文书设计";
      let rpath = "doc/detail";
      let rname = "doc-detail";
      this.addTabPage(pageTitle, rpath, rname, tabPage, { id: row && row.id });
      // const route = [
      //   {
      //     path: "/",
      //     component: layoutHeaderAside,
      //     children: [
      //       {
      //         path: rpath,
      //         name: rname,
      //         component: () => import("@/views/system/doc/detail-info"),
      //         meta: {title: pageTitle}
      //       }
      //     ]
      //   }
      // ];
      // this.$router.addRoutes(route);
      // // 更新标签页池
      // this.pageInit([...frameInRoutes, ...route]);
      // // 跳转
      // this.$router.push({name: rname, params: {id: row && row.id}});
    },
    add() {
      this.showDetail();
    },
    mod(rd) {
      if (rd) {
        this.showDetail(rd.row);
      } else if (this.selected.length == 1) {
        this.showDetail(this.selected[0]);
      } else {
        utils.showTips("请选择一行数据");
        return;
      }
    },
    del(rd) {
      if (!rd && !this.selected.length) {
        utils.showTips("请选择要删除的数据", false);
        return;
      }
      let delIds = [];
      if (rd) {
        delIds = [rd.row.id];
      } else {
        this.selected.map(item => {
          delIds.push(item.id);
        });
      }

      this.$confirm("确认删除？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "取消"
      }).then(() => {
        this.submitDel(delIds);
      });
    },
    async submitDel(ids) {
      await docApi.del(ids);
      await this._fetchListData();
    }
  }
};
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
